<template>
  <view class="fullscreen-login">
    <!-- 登录表单区域 -->
    <view class="login-form">
      <!-- 顶部操作区 -->
      <view class="top-bar">
        <view class="help-btn" @click="help.show = true">
          <image src="/static/customer_service.png" mode="widthFix" class="help-icon"/>
        </view>
      </view>

      <!-- 标题区域 -->
      <view class="title-area">
        <view class="login-title">Puff TS English</view>
        <view class="login-subtitle">学员专属登录入口</view>
      </view>

      <!-- 输入框区域 -->
      <view class="input-container">
        <view class="input-group" :style="{'--order': 1}">
          <input
              type="number"
              v-model="phone"
              @focus="isPhoneFocus = true"
              @blur="isPhoneFocus = false"
              class="input-field"
          >
          <label :class="{ active: isPhoneFocus || phone }" class="floating-label">手机号</label>
          <view class="input-bottom-line" :class="{ focused: isPhoneFocus || phone }"></view>
        </view>

        <view class="input-group" :style="{'--order': 2}">
          <input
              :type="showPassword ? 'text' : 'password'"
              v-model="password"
              @focus="isPasswordFocus = true"
              @blur="isPasswordFocus = false"
              class="input-field"
          >
          <label :class="{ active: isPasswordFocus || password }" class="floating-label">登录密码</label>
          <view class="input-bottom-line" :class="{ focused: isPasswordFocus || password }"></view>
          <image
              :src="showPassword ? '/static/eye-open.png' : '/static/eye-close.png'"
              class="eye-icon"
              @click="showPassword = !showPassword"
          />
        </view>
      </view>

      <!-- 忘记密码 -->
      <view class="forgot-password" @click="forgetPassword.show = true">忘记密码?</view>

      <!-- 登录按钮 -->
      <u-button
          class="login-button"
          @click="login"
          :loading="isLoading"
      >
        登录
      </u-button>

      <!-- 社交登录 -->
      <view class="social-login">
        <text class="divider">或通过以下方式登录</text>
        <view class="social-icons">
          <image src="/static/wechat.png" class="social-icon"/>
          <image src="/static/email.png" class="social-icon"/>
        </view>
      </view>

      <!-- 注册引导 -->
      <view class="register-guide">
        还没有账号？
        <text class="register-link" @click="navToRegister">立即注册</text>
      </view>
    </view>

    <!-- 帮助弹窗 -->
    <u-modal
        :show="help.show"
        :title="help.title"
        @confirm="help.show = false"
        :border-radius="16"
        :confirm-color="'#4285f4'"
    >
      <view class="modal-content">
        <rich-text :nodes="help.content"></rich-text>
      </view>
    </u-modal>
    <!-- 找回密码弹窗 -->
    <u-modal
        :show="forgetPassword.show"
        :title="forgetPassword.title"
        @confirm="forgetPassword.show = false"
        :border-radius="16"
        :confirm-color="'#4285f4'"
    >
      <view class="modal-content">
        <rich-text :nodes="forgetPassword.content"></rich-text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import config from '@/config.js'
import RsaUtil from "../../utils/rsa-util";

export default {
  data() {
    return {
      phone: '',
      password: '',
      showPassword: false,
      isLoading: false,
      isPhoneFocus: false,
      isPasswordFocus: false,
      publicKey: '',
      help: {
        show: false,
        title: '获取帮助',
        content: '登录遇到相关问题，可以联系客服。<br/>微信：liujijiselfwechat'
      },
      forgetPassword: {
        show: false,
        title: '找回密码',
        content: '如果忘记了密码，请联系老师为你重置密码。'
      }
    };
  },
  onLoad() {
    this.getPublicKey()
    const token = uni.getStorageSync('token')
    if (token) {
      uni.reLaunch({url: '/pages/system-frame'})
    }
  },
  methods: {
    getPublicKey() {
      uni.request({
        url: `${config.AUTH_URL}/common/getPublicKey`,
        method: 'POST',
        success: (res) => {
          if (res.data.success && res.data.data) {
            this.publicKey = res.data.data

            // 尝试自动登录
            const params = new URLSearchParams(window.location.search)
            const key = params.get("q1")
            if (key) {
              this.loginQuickKey(key)
            }
          } else {
            this.showToast(res.data.message || '初始化错误')
          }
        },
        fail: (err) => {
          this.showToast('网络错误，请重试')
        },
        complete: () => {
        }
      })
    },
    loginQuickKey(quickKey) {
      if (!quickKey) {
        return
      }

      const rsa = new RsaUtil(this.publicKey)
      const params = {
        password: rsa.encrypt(quickKey)
      }
      this.isLoading = true
      uni.showLoading({title: '登录中...', mask: true})

      uni.request({
        url: `${config.AUTH_URL}/auth/student/v1/login/quickLogin`,
        method: 'POST',
        data: params,
        header: {'Content-Type': 'application/json'},
        success: (res) => {
          if (res.data.success && res.data.data.token) {
            uni.setStorageSync('token', res.data.data.token)
            this.showToast('登录成功', 'success')
            setTimeout(() => uni.reLaunch({url: '/pages/system-frame'}), 300)
          } else {
            this.showToast(res.data.message || '登录失败')
          }
        },
        fail: (err) => {
          console.error('登录请求失败', err)
          this.showToast('网络错误，请重试')
        },
        complete: () => {
          this.isLoading = false
          uni.hideLoading()
        }
      })
    },
    login() {
      if (!this.phone) return this.showToast('请输入手机号')
      if (!this.password) return this.showToast('请输入密码')

      const rsa = new RsaUtil(this.publicKey)
      const params = {
        phone: rsa.encrypt(this.phone),
        password: rsa.encrypt(this.password)
      }

      this.isLoading = true
      uni.showLoading({title: '登录中...', mask: true})

      uni.request({
        url: `${config.AUTH_URL}/auth/student/v1/login/phone`,
        method: 'POST',
        data: params,
        header: {'Content-Type': 'application/json'},
        success: (res) => {
          if (res.data.success && res.data.data.token) {
            uni.setStorageSync('token', res.data.data.token)
            this.showToast('登录成功', 'success')
            setTimeout(() => uni.reLaunch({url: '/pages/system-frame'}), 300)
          } else {
            this.showToast(res.data.message || '登录失败')
          }
        },
        fail: (err) => {
          console.error('登录请求失败', err)
          this.showToast('网络错误，请重试')
        },
        complete: () => {
          this.isLoading = false
          uni.hideLoading()
        }
      })
    },
    showToast(title, icon = 'none') {
      uni.showToast({title, icon, duration: 2000})
    },
    navToRegister() {
      uni.navigateTo({url: '/pages/register'})
    }
  }
};
</script>

<style scoped>
/* 全屏容器 - 新增渐变背景 */
.fullscreen-login {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  box-sizing: border-box;
}

/* 登录表单区域 */
.login-form {
  width: 100%;
  max-width: 600rpx;
  background: white;
  border-radius: 24rpx;
  padding: 60rpx 50rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
  animation: fadeInUp 0.6s ease-out;
}

/* 顶部操作区 */
.top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 80rpx;
}

.help-icon {
  width: 40rpx;
  height: 40rpx;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.help-btn:hover .help-icon {
  opacity: 1;
}

/* 标题区域 */
.title-area {
  text-align: center;
  margin-bottom: 80rpx;
}

.login-title {
  font-size: 48rpx;
  font-weight: 700;
  color: #000000;
  letter-spacing: 2rpx;
  margin-bottom: 10rpx;
}

.login-subtitle {
  font-size: 28rpx;
  color: #666;
}

/* 输入框区域 */
.input-container {
  margin-bottom: 30rpx;
}

.input-group {
  position: relative;
  margin-bottom: 70rpx;
  animation: fadeInUp 0.6s ease-out forwards;
}

.input-field {
  width: 100%;
  height: 80rpx;
  padding: 20rpx 0;
  font-size: 32rpx;
  color: #1a1a1a;
  border: none;
  border-bottom: 2rpx solid #e0e0e0;
  background: transparent;
  outline: none;
  box-sizing: border-box;
  transition: all 0.3s;
}

.input-field:focus {
  border-bottom-color: #000000;
}

.floating-label {
  position: absolute;
  left: 0;
  top: 30rpx;
  font-size: 28rpx;
  color: #999;
  pointer-events: none;
  transition: all 0.3s ease;
}

.floating-label.active {
  top: -24rpx;
  font-size: 24rpx;
  color: #000000;
  font-weight: 500;
}

.eye-icon {
  position: absolute;
  right: 0;
  bottom: 20rpx;
  width: 40rpx;
  height: 40rpx;
  opacity: 0.6;
  transition: all 0.2s;
}

.eye-icon:active {
  opacity: 1;
  transform: scale(0.95);
}

/* 忘记密码 */
.forgot-password {
  text-align: right;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 40rpx;
  padding-right: 4rpx;
  transition: color 0.2s;
}

.forgot-password:active {
  color: #4285f4;
}

/* 登录按钮 */
.login-button {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to right, #4285f4, #34a853);
  border-radius: 50rpx;
  border: none;
  transition: all 0.3s;
  box-shadow: 0 4rpx 15rpx rgba(66, 133, 244, 0.4);
  letter-spacing: 2rpx;
  margin-top: 20rpx;
}

.login-button:not([disabled]):active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(66, 133, 244, 0.4);
}

/* 社交登录 */
.social-login {
  margin-top: 60rpx;
  text-align: center;
}

.divider {
  display: inline-block;
  position: relative;
  color: #999;
  font-size: 26rpx;
}

.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 80rpx;
  height: 1rpx;
  background: #eee;
}

.divider::before {
  left: -90rpx;
}

.divider::after {
  right: -90rpx;
}

.social-icons {
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
}

.social-icon {
  width: 80rpx;
  height: 80rpx;
  margin: 0 20rpx;
  opacity: 0.8;
  transition: all 0.2s;
}

.social-icon:active {
  opacity: 1;
  transform: scale(0.95);
}

/* 注册引导 */
.register-guide {
  text-align: center;
  margin-top: 40rpx;
  font-size: 28rpx;
  color: #666;
}

.register-link {
  color: #4285f4;
  margin-left: 10rpx;
}

.register-link:active {
  text-decoration: underline;
}

/* 弹窗内容 */
.modal-content {
  padding: 20rpx 0;
  font-size: 28rpx;
  line-height: 1.6;
}

/* 动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式 */
@media (min-width: 768px) {
  .login-form {
    padding: 80rpx 70rpx;
  }

  .login-title {
    font-size: 56rpx;
  }
}
</style>
